<!DOCTYPE html>
<html style="height:100%;">

<head>
    <meta charset="utf-8">
    <!--通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="bootstrap5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="font-awesome4/css/font-awesome.min.css">
    <style>
        body {
            font-size: .875rem;
        }
        /*
 * Sidebar
 */

        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 48px 0 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
        }

        @media (max-width: 767.98px) {
            .sidebar {
                top: 3rem;
            }
        }

        .sidebar-sticky {
            height: calc(100vh - 48px);
            overflow-x: hidden;
            overflow-y: auto;
        }

        .sidebar .nav-link {
            font-weight: 500;
            color: #333;
        }

        .sidebar .nav-link .feather {
            margin-right: 4px;
            color: #727272;
        }

        .sidebar .nav-link.active {
            color: #f5f6f8;
        }
        .sidebar .nav-item.active{
            color:#f5f6f8;
        }

        .sidebar .nav-link:hover .feather,
        .sidebar .nav-link.active .feather {
            color: inherit;
        }

        .sidebar-heading {
            font-size: .75rem;
        }

        /*
        * Navbar
        */

        .navbar-brand {
            padding-top: .75rem;
            padding-bottom: .75rem;
            background-color: rgba(233, 233, 233, .25);
            box-shadow: inset -1px 0 0 rgba(233, 233, 233, 0.25);
        }

        .navbar .navbar-toggler {
            top: .25rem;
            left: 10rem;
        }
        a.nav-link:hover{
            background-color:deepskyblue;
        }
        .nav-item>div{
            border-left: 2px solid blue;
            margin-left:10px;
        }
        #contentDiv {padding-left:1px;padding-right:1px;background-color: #dee1e7;}
        #contentDiv ul li a{min-width:6.5em;border-radius: 0%;text-align: center ;}
        #contentDiv ul li a i{position:relative;top:-10px;left:10px;}
        #contentDiv ul li a i:hover{color:#aaa;}
    </style>
</head>

<body>
    <header class="navbar navbar-light sticky-top bg-light flex-md-nowrap p-0 shadow">
        <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="index2.html">新星管理系统</a>
        <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-nav">
            <div class="nav-item text-nowrap">
                <a class="nav-link px-3" href="#">Sign out</a>
            </div>
        </div>
    </header>
    <div class="container-fluid">
        <div class="row">
            <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
                <div  id="accordion" class="position-sticky pt-3 sidebar-sticky">
                    <ul class="nav flex-column nav-pills px-2">
                        <li class="nav-item">
                            <a id="home" class="nav-link active" aria-current="page" href="#">
                                <i class="fa fa-home" aria-hidden="true"></i>
                                首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#sysmgt">
                                <i class="fa fa-gear" aria-hidden="true"></i>
                                系统管理
                            </a>
                            <div id="sysmgt" class="collapse" data-bs-parent="#accordion">
                                <ul  class="nav flex-column ps-2">
                                    <li class="nav-item">
                                        <a class="nav-link" aria-current="page" href="#" onclick="openPage('用户管理','user.html','user')">
                                            <i class="fa fa-user" aria-hidden="true"></i>
                                            用户管理
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" aria-current="page" href="#" onclick="openPage('角色管理','role.html','role')">
                                            <i class="fa fa-users" aria-hidden="true"></i>
                                            角色管理
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" aria-current="page" href="#" onclick="openPage('菜单及资源管理','resource.html','resource')">
                                            <i class="fa fa-list" aria-hidden="true"></i>
                                            资源管理
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#sysmonitor">
                                <i class="fa fa-video-camera" aria-hidden="true"></i>
                                系统监控
                            </a>
                            <div id="sysmonitor" class="collapse" data-bs-parent="#accordion">
                                <ul class="nav flex-column ps-2">
                                    <li class="nav-item">
                                        <a class="nav-link" aria-current="page" href="#" onclick="openPage('登录日志','loginlog.html','loginlog')">
                                            <i class="fa fa-user" aria-hidden="true"></i>
                                            登录日志
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" aria-current="page" href="#" onclick="openPage('操作日志','optlog.html','optlog')">
                                            <i class="fa fa-users" aria-hidden="true"></i>
                                            操作日志
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>

                  
                </div>
            </nav>
            <div id="contentDiv" class="col-md-9 col-lg-10" style="position:fixed;top:0;right:0;padding-top:48px;height: 100vh;">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active"  data-bs-toggle="tab" href="#homeTab">首页</a>
                    </li>

                    <!--<li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#profile">关注</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#contact">粉丝</a>
                    </li>-->

                </ul>
                <div class="tab-content" style="background-color: white;height:100%;">
                    <div class="tab-pane fade show active" id="homeTab">
                        <iframe src="main.html" style="width:100%;height:100%;"></iframe>
                    </div>
                    <!--<div class="tab-pane fade" id="profile">
                       4456
                    </div>
                    <div class="tab-pane fade" id="contact">
                       789789
                    </div>-->
                </div>

                
            </div>
        </div>
    </div>

    <script type="text/javascript" src="jquery3.6.1.min.js"></script>
    <script type="text/javascript" src="bootstrap5/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">


        $("ul>li>div>ul>li>a").click(function(){
            if($(this).hasClass("active")){

            }else{
                $("#sidebarMenu .nav-item a").removeClass("active")
                //$(this).parent().siblings().children().removeClass("active")
                //$(this).parent().parent().parent().parent().siblings().children().children().children().children().removeClass("active")
                //$(this).parent().parent().parent().parent().siblings().children().removeClass("active")
                $(this).addClass("active")
            }
        })
        $("#home").click(function(){
            if($(this).hasClass("active")){

            }else{
                $("#sidebarMenu .nav-item a").removeClass("active")
                //$(this).parent().siblings().children().children().children().children().removeClass("active")
                $(this).addClass("active")
            }
        })

        function openPage(title,url,code) {
            var tabStr = '<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#'+code+'">'+title+'<i class="fa fa-times-circle-o" onclick="close(this)"></i></a></li>';
            $("#contentDiv ul li a").removeClass("active")
            $("#contentDiv ul").append(tabStr)
           var contentStr = '<div class="tab-pane fade show active" id="'+code+'"><iframe src="'+url+'" style="width:100%;height:100%;"></iframe></div>';
           $("#contentDiv .tab-content div").removeClass("active")
           $("#contentDiv .tab-content div").removeClass("show")
            $("#contentDiv .tab-content").append(contentStr);
        }

        function close(ele){
            alert(ele);
        }

    </script>
</body>

</html>